<template>
  <el-container class="container">
    <v-header></v-header>
    <v-aside></v-aside>
    <el-main class="main" :class="{ 'content-collapse': collapse }">
      <router-view :key="$route.path"></router-view>
    </el-main>
  </el-container>
</template>

<script>
import vHeader from "./Header";
import vAside from "./Aside";

import { mapGetters } from "vuex";

export default {
  data() {
    return {
      user: {},
    };
  },
  components: {
    vHeader,
    vAside,
  },
  computed: {
    ...mapGetters(["collapse"]),
  },
};
</script>

<style lang="scss">
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .main {
    position: absolute;
    left: 300px;
    right: 0;
    top: 70px;
    bottom: 0;
    padding-bottom: 30px;
    -webkit-transition: left 0.3s ease-in-out;
    transition: left 0.3s ease-in-out;
    background: #f0f0f0;
    &.content-collapse {
      left: 65px;
    }
    &.g-container {
      z-index: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
      padding: 0;
      filter: blur(5px) contrast(20);
      &::before {
        position: absolute;
        // content: "";
        background: #000;
        top: 0;
        left: 0;
        right: 0;
        height: 20vh;
        z-index: 10;
      }
    }
  }
}
</style>
